<template>
  <div class="handleComments min-h-screen bg-hex-F5F5F5">
    <top-navbar title="发表评价" />
    <div class="m-32rpx box-border rounded-32rpx bg-hex-ffffff p-32rpx">
      <div class="mb-58rpx flex">
        <div class="mr-24rpx h-82rpx w-78rpx flex items-center justify-center rounded-12rpx bg-hex-F5F5F5">
          <image
            :src="tempOption.productImage"
            mode="scaleToFill"
            class="h-64rpx w-42rpx"
          />
        </div>
        <div class="w-100% flex justify-between">
          <div class="flex flex-col justify-between">
            <div class="w-360rpx truncate text-28rpx text-hex-333333">{{ tempOption.productName }}</div>
            <div class="mb-10rpx flex items-center text-24rpx text-hex-7c8699">
              <div
                class="tagLine relative mr-18rpx"
              >{{ tempOption.specs }}</div>
            </div>
          </div>
          <div @click="openSelectGoodsPop">
            <image
              :src="`${cdnUrl}/imgs/tea/more.png${imgVersion}`"
              mode="scaleToFill"
              class="h-32rpx w-32rpx"
            />
          </div>
        </div>
      </div>
      <div class="flex items-center">
        <div class="mr-50rpx text-28rpx text-hex-333333">描述相符</div>
        <div class="flex">
          <div
            v-for="item in radioList"
            class="mr-32rpx flex items-center"
            @click.stop="radioChange(item.value)"
          >
            <div
              :class="{ boxShadow: item.value===currentRadio }"
              class="mr-10rpx h-44rpx w-44rpx flex items-center justify-center overflow-hidden rounded-50%">
              <uni-icons type="checkbox-filled" :color="item.value===currentRadio?'#ABCD03 ':'#E9E6E6'" size="28" />
            </div>
            <text class="text-28rpx text-hex-333333">{{ item.name }}</text>
          </div>
        </div>
      </div>
    </div>
    <div class="m-32rpx rounded-32rpx bg-hex-ffffff p-32rpx">
      <div class="border-2rpx border-transparent border-b-hex-F5F5F5 border-solid pb-32rpx text-28rpx text-hex-333333">对商品的评价如何?</div>
      <uni-easyinput v-model="commentsContent" :inputBorder="false"
                     :autoHeight="true" type="textarea"
                     placeholderStyle="color:#C4C4C4;font-size:32rpx"
                     placeholder="请输入您的评价" />
      <div class="flex">
        <div v-for="(item, index) in fileLists"
             class="relative mb-25rpx mr-25rpx h-152rpx w-152rpx flex flex-col rounded-20rpx">
          <image
            class="h-152rpx w-152rpx rounded-20rpx bg-hex-F5F5F5"
            :src="item"
            mode="scaleToFill"
          />
          <div
            class="absolute h-40rpx w-40rpx flex items-center justify-center border rounded-50% bg-[rgba(0,0,0,0.7)] -bottom-18rpx -right-18rpx"
            @click.stop="deleteImg(index)">
            <image
              class="h-40rpx w-40rpx"
              :src="`${cdnUrl}/imgs/mine/close.png${imgVersion}`"
              mode="scaleToFill"
            />
          </div>
        </div>
        <div class="mb-20rpx h-152rpx w-152rpx flex flex-col items-center justify-center rounded-20rpx bg-hex-F5F5F5"
             @click.stop="select">
          <uni-icons type="plusempty" size="30" color="#D9D9D9" />
        </div>
      </div>
    </div>
    <div
      class="fixed bottom-32rpx left-32rpx right-32rpx h-72rpx flex items-center justify-center rounded-148rpx bg-hex-ABCD03 text-hex-ffffff"
      @click="handleComments"
    >发布</div>
    <uni-popup ref="selectGoodsPop">
      <div class="relative box-border rounded-44rpx bg-hex-ffffff py-32rpx">
        <div @click="closeSelectPop"><image
          :src="`${cdnUrl}/imgs/login/cancle.png${imgVersion}`"
          mode="scaleToFill"
          class="absolute right-16rpx top-16rpx h-52rpx w-52rpx"
        /></div>
        <div class="mb-80rpx mt-16rpx text-center text-32rpx font-bold text-hex-000000">选择对应的商品进行评价</div>
        <div class="mb-32rpx box-border border-2rpx border-transparent border-b-hex-F5F5F5 border-solid px-32rpx">
          <div
            v-for="(item, index) in goodsList"
            :key="item.productId"
            class="mb-36rpx flex items-center justify-between"
          >
            <div class="flex">
              <div class="mr-22rpx h-82rpx w-78rpx flex items-center justify-center rounded-12rpx bg-hex-F5F5F5">
                <image
                  :src="item.productImage"
                  mode="scaleToFill"
                  class="h-64rpx w-42rpx"
                />
              </div>
              <div>
                <div class="mb-8rpx text-28rpx font-bold text-hex-333333">{{ item.productName }}</div>
                <div class="mb-10rpx flex items-center text-24rpx text-hex-7c8699">
                  <div
                    class="tagLine relative mr-18rpx"
                  >{{ item.productName }}</div>
                </div>
              </div>
            </div>
            <div
              class="ml-94rpx h-77rpx w-77rpx flex items-center justify-center"
              @click="optionSelect(item.productId, index)">
              <image
                v-if="item.isSelect"
                :src="`${cdnUrl}/svgicons/userComment/select.svg${imgVersion}`"
                mode="scaleToFill"
                class="h-77rpx w-77rpx"
              />
              <div v-if="!item.isSelect" class="h-40rpx w-40rpx border-4rpx border-hex-ABCD03 rounded-50% border-solid" />
            </div>
          </div>
        </div>
        <div class="text-center text-28rpx font-600 text-hex-ABCD03" @click="closeSelectPop">确定</div>
      </div>
    </uni-popup>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user'

let productId: any = $ref('')
let appType: any = $ref(2)
const userStores = useUserStore()
onLoad((options) => {
  if (options) {
    productId = options.businessId
    appType = options.appType
  }
})
const handleComments = async () => {
  const reqData = {
    method: 'post',
    data: {
      'attributeDesc': tempOption.specs,
      'businessId': productId,
      'content': commentsContent,
      'imagesUrl': fileLists.join(','),
      'level': currentRadio,
      'productId': tempOption.productId,
    },
    headers: {
      AppType: appType,
      UserId: userStores.user.id,
    },
  }
  const { data, status, error } = await Fetch('/qqyapi/product/product/evaluation/add', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    uni.showToast({
      title: '评价成功',
      icon: 'none',
    })
    setTimeout(() => {
      navTo('/pages-mine/order')
    }, 1800)
  }
}
const selectGoodsPop: any = $ref('')
const openSelectGoodsPop = () => {
  selectGoodsPop.open('center')
}

let goodsList: any = $ref([])

let tempOption: any = $ref({})
let tempIndex: any = $ref(0)
const optionSelect = (idx, index) => {
  for (let index = 0; index < goodsList.length; index++) {
    if (goodsList[index].productId === idx) {
      goodsList[index].isSelect = true
    } else {
      goodsList[index].isSelect = false
    }
  }

  tempIndex = index
}
const closeSelectPop = () => {
  tempOption = goodsList[tempIndex]
  selectGoodsPop.close()
}
let commentsContent: any = $ref('')
let radioList: any = $ref([
  { name: '好评', value: 0 },
  { name: '中评', value: 1 },
  { name: '差评', value: 2 },
])
let currentRadio: any = $ref(0)
const radioChange = (index) => {
  currentRadio = index
}
const getOrderDetail = async () => {
  const reqData = {
    method: 'post',
    data: { 'businessId': productId },
    headers: {
      AppType: appType,
      UserId: userStores.user.id,
    },
  }
  const { status, data, error } = await Fetch('/qqyapi/order/order/detail', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    let tempDetail: any = {}
    tempDetail = data?.result
    goodsList = tempDetail.childList
    tempOption = goodsList[0]
  }
}
// 上传图片
let fileLists: any = $ref([])
const select = async () => {
  await chooseImage({
    count: 3, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], //从相册或者拍照选择
    async success(res: any) {
      for (let i = 0; i < res.tempFiles.length; i++) {
        const fileUrl = await uploadCosFile(res.tempFiles[i], res.tempFiles[i].path)
        fileLists.push(fileUrl)
      }
    },
  })
  console.log(fileLists, 'fileLists')
}
const deleteImg = (index) => {
  fileLists.splice(index, 1)
}

onMounted(() => {
  getOrderDetail()
})
</script>

<style lang="scss" scoped>
.handleComments{
  .boxShadow{
    box-shadow: 0rpx 6rpx 12rpx 0rpx rgb(76 131 40 / 25%);
  }

  .tagLine::after{
    position: absolute;
    content: '';
    height:14rpx;
    width:2rpx;
    top: 10rpx;
    right: -10rpx;
    background-color: #7c8699;
  }

  .tagLine:last-child::after{
    height:0rpx;
    width:0rpx;
  }
}
</style>
